<template>
    <div>
        <img :src="detail.pic" alt="">
        <p>{{detail.title}}</p>
    </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import {useRouter} from 'vue-router'
import axios from 'axios'
export default {
   setup(){
       const state =reactive({
           detail:{}
       })
       const router =useRouter();
       onMounted(()=>{
        var {id} =router.currentRoute.value.query
        console.log(id);
        axios.get(`http://122.112.161.135:4000/api/movieDetail?id=${id}`).then(res=>{
            console.log(res.data.res);
            state.detail =res.data.res[0]
        })

       })
       const refsState =toRefs(state) 
       return{
           ...refsState
       }
   }
};
</script>

<style  scoped>

</style>